// 路由鉴权  要去main.ts全局使用
// 鉴权：就是项目中 路由能不能被访问的设置 （某一个路由什么条件下可以访问 什么条件下不可以访问）
// 先引入路由
import router from '@/router'
// 引入进度条插件
import nprogress from 'nprogress'
nprogress.configure({ showSpinner: false }) //这个是取消进度条后面的加载转圈的小圈圈
// 引入它的样式
import 'nprogress/nprogress.css'
import setting from './setting' //引入标题

// 引入小仓库  下面需要用到token
import useUserStore from './store/modules/user'
// 会报错 所以必须引入大仓库 才能使用小仓库
import pinia from './store/index'
const userStore = useUserStore(pinia)

// 全局守卫

// 全局前置守卫
router.beforeEach(async (to: any, from: any, next) => {
  // to 到那个路由去  from从哪个路由来
  nprogress.start() //进度条开始
  // 给加一个标题 就是跳转的某个页面 浏览器标签就显示某个页面的标题
  // document.title = '硅谷甄选-' + to.meta.title
  // 不把标题写死
  // document.title = setting.title + '-'+ to.meta.title
  document.title = `${setting.title} - ${to.meta.title}`

  // 获取token 判断用户是否登录  就可以访问其他路由权限
  const token = userStore.token
  // 用户登录
  if (token) {
    // 如果登录后 还要访问login页面 就重定向到首页 不让去login页面
    if (to.path == '/login') {
      next({ path: '/' })
    } else {
      // 登录后 访问其他页面 有个小问题 就是其他页面再刷新后  就会丢失用户的信息 用户名和头像
      // 这里也要做一个解决  去拿到小仓库里 调用用户信息的方法
      const username = userStore.username
      const avatar = userStore.avatar
      if (username && avatar) {
        next() //如果存在用户信息 就放行
      } else {
        // 在守卫这里进行检查 没的话就去调用 再放行
        try {
          // 重新去调用 小仓库里 访问用户信息的方法
          await userStore.userinfo()
          // 如果刷新的时候是异步路由页面刷新 用户信息拿到了但是路由还没加载完 就会出现白屏现象这里就...to
          // next() //这种写法是 你要去哪  只要有用户信息就直接放行
          next({ ...to }) //这种写法是 你要去这个路由 但我先不放行 等你都加载完毕（即用户信息获取完，路由组件也加载完毕）我才放行
        } catch (error) {
          // 这里就是 token过期 以及 用户修改了本地存储的token
          // 那么退出登录清空用户信息 重新回到登录页面 redirect是在返回到登录页时 方便下次登录还是当初所在的页面
          // 因为这个也是异步操作 所以只有在拿到成功的结果时 才会继续跳转到login
          await userStore.userOut()
          next({ path: '/login', query: { redirect: to.path } })
        }
      }
    }
  } else {
    // 用户未登录 如果访问的是login页面 放行
    if (to.path == '/login') {
      next()
    } else {
      // 未登录 访问其他页面  就把想访问的页面路径参数 带上重定向到登录页面  等登录成功后直接跳转过去
      next({ path: '/login', query: { redirect: to.path } })
    }
  }
  // next() //路由的放行函数
})
// 全局后置守卫
router.afterEach((to: any, from: any) => {
  nprogress.done() //进度条结束
})

// 1.任意路由切换实现路由进度条 下载一个插件  --nprogress
// 2.路由鉴权（路由组件访问权限）
// 全部的路由组件：登录|404|任意路由|首页|数据大屏|权限管理（3个子路由）|商品管理（四个字路由）
// 未登录 就只能访问login页面 其余路由不可以访问(指向登录页面)
// 登录后  不可以再访问login页面(再访问就指向首页)
